import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Alert

Displays a callout for user attention.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.alert/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='alert' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FAlert(
      title: const Text('Heads Up!'),
      subtitle: const Text('You can add components to your app using the cli.'),
    );
    ```
  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create alerts
```

## Usage

### `FAlert(...)`

```dart copy
FAlert(
  style: FAlertStyle(...),
  icon: Icon(FIcons.badgeAlert),
  title: const Text('Heads Up!'),
  subtitle: const Text('You can add components to your app using the cli.'),
);
```

## Examples

### Primary

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='alert' query={{}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    FAlert(
      title: const Text('Heads Up!'),
      subtitle: const Text('You can add components to your app using the cli.'),
    );
    ```
  </Tabs.Tab>
</Tabs>

### Destructive

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='alert' query={{style: 'destructive'}}/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart {4} copy
    FAlert(
      title: const Text('Heads Up!'),
      subtitle: const Text('You can add components to your app using the cli.'),
      style: FAlertStyle.destructive(),
    );
    ```
  </Tabs.Tab>
</Tabs>
